<template>
  <q-footer style="background-color:#131313">
    <div class="row justify-between items-center" style="height:80px">
      <div class="avatar">avatar</div>
      <div>
        <router-link
          v-for="button in buttons"
          :key="button.name"
          :to="button.route"
          replace
          v-slot:default="props"
          class="my-footer-link"
        >
          <q-btn
            v-bind="buttonProps(props)"
            no-caps
            stack
            flat
            :icon="button.icon"
            :label="button.name"
          />
        </router-link>
      </div>
      <div></div>
    </div>
  </q-footer>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
interface ButtonProps {
  href: string;
  route: any;
  isActive: boolean;
  isExactActive: boolean;
}
export default defineComponent({
  setup() {
    const buttons = ref([
      {
        name: 'Notifacation',
        icon: 'mdi-bell',
        route: { name: 'Notifacation' },
      },
      {
        name: 'Connections',
        icon: 'people',
        route: { name: 'Connections' },
      },
      {
        name: 'Library',
        icon: 'layers',
        route: { name: 'Library' },
      },
      {
        name: 'My Content',
        icon: 'mdi-play-box',
        route: { name: 'MyContents' },
      },
      {
        name: 'Analytics',
        icon: 'mdi-chart-box',
        route: { name: 'Analytics' },
      },
    ]);
    function buttonProps({
      href,
      route,
      isActive,
      isExactActive,
    }: ButtonProps) {
      const props = {
        color: '#808080',
        to: href,
      };

      if (isActive === true) {
        props.color = 'white';
      } else {
        props.color = '#808080';
      }

      return props;
    }
    return { buttons, buttonProps };
  },
});
</script>
<style lang="sass">
.my-footer-link
  text-decoration: none
  a:link
    color: #808080
  a:visited
    color: #808080
  a:active
    color: white
</style>